<template>
	<view>
		<view class="logo_view">
			<image src="../../static/logo.png" class="logo_img" mode=""></image>
		</view>
		<view>
			<wInput v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号"></wInput>
			<wInput v-model="verCode" type="number" isShowCode codeText="获取验证码" 
			placeholder="请输入验证码" setTime="60" ref="runCode" @setCode="getVerCode()"></wInput>
			<wButton text="登录/注册" :rotate="request_flag" :bgColor="(mobile.length == 11 && verCode.length == 6) ? '#65a4f8':'#C0C0C0'" 
			fontColor="#FFFFFF" @click="bindLogin()"></wButton>
		</view>
	</view>
</template>

<script>
	import {
	    mapMutations
	} from 'vuex';
	
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	
	export default {
		onBackPress(){
			return true;
		},
		components:{
			wInput,  //input
			wButton  //button
		},
		data() {
			return {
				mobile: '',
				verCode:'',
				request_flag:false,
				spread_id:0
			}
		},
		mounted() {
			var that = this;
			uni.getStorage({
				key:'spread_data',
				success(res) {
					var res_data = JSON.parse(res.data);
					if(res_data.key == "spread"){
						that.spread_id = res_data.value;
					}
				}
			})
		},
		methods: {
			getVerCode:function(){
				if(!(/^1[3456789]\d{9}$/.test(this.mobile))){
					this.$toast_fail('请输入正确的手机号');
					return false;
				}
			    //触发倒计时
			    this.$refs.runCode.$emit('runCode');
				uni.request({
					url:`${this.$serverUrl}/register/verify`,
					header: {
						"Content-Type": "application/json"
					},
					data: {
						"phone": this.mobile
					},
					method: "POST",
					success: (e) => {
						this.request_flag = false;
						if(e.data.status == 200){
							this.$toast_success(e.data.msg);
						}else{
							this.$toast_fail(e.data);
							this.$refs.runCode.$emit('runCode',0);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					},
					complete: () => {
						this.loading = false;
					}
				})
			},
			bindLogin:function(){
				if(this.mobile.length == 11 && this.verCode.length == 6){
					this.request_flag = true;
					uni.request({
						url:`${this.$serverUrl}/login`,
						header: {
							"Content-Type": "application/json"
						},
						data: {
							"account": this.mobile,
							"captcha": this.verCode,
							"password": this.mobile,
							"spread": this.spread_id
						},
						method: "POST",
						success: (e) => {
							this.request_flag = false;
							if(e.data.status == 200){
								this.$toast_success(e.data.msg);
								this.login(e.data.data);
								uni.switchTab({
									url:"../index/index"
								})
							}else{
								this.$toast_fail(e.data);
							}
						},
						fail: (e) => {
							this.request_flag = false;
							this.$toast_fail({msg:"请求失败"});
						},
						complete: () => {
							this.loading = false;
						}
					})
				}
			},
			...mapMutations(['login'])
		}
	}
</script>

<style>
	.logo_view {
		text-align: center;
		width: 100%;
		margin-top: 200rpx;
	}

	.logo_img {
		width: 200rpx;
		height: 200rpx;
	}
</style>
